@import "header.html"
<link rel="stylesheet" href="../css/zhu_su_yi_wai_xian.css">
<body>

<header class="fxj-header">
    <back></back>
    <h1 class="fxj-title">住宿意外险</h1>
</header>

<main id="main">
    <ul class="guys-group">
        <li class="guys-item line-transverse" v-for="guy of list" @click="selectGuy(guy)">
            <span>
                <svg class="icon icon-checkbox" :class="{active:guy.needInsurance}">
                    <use v-show="!guy.needInsurance" xlink:href="#icon-checkbox"></use>
                    <use v-show="guy.needInsurance" xlink:href="#icon-checkbox1"></use>
                </svg>
                <span v-cloak>{{guy.name}}</span>
            </span>
            <span class="price">￥0.5/天</span>
        </li>
    </ul>

    <div class="price-detail">
        <div class="price-title line-transverse">
            <span>日价</span>
            <span>天数</span>
            <span>人数</span>
            <span>合计</span>
        </div>
        <div>
            <span class="price">￥0.5</span>
            <span class="price" v-cloak>{{nightNum}}</span>
            <span>
                <span class="price" v-cloak>{{num}}</span>
                <span class="tips">(免费1人)</span>
            </span>
            <span class="price" v-cloak>￥{{total}}</span>
        </div>
    </div>

    <p>住宿意外险是分享家短租平台为了租客出行住宿安全推出的一项有偿服务，默认赠送第一位入住人，其他入住人自愿购买，最高可赔付10万元。</p>
    <p class="warning">
        <svg class="icon">
            <use xlink:href="#icon-zhuyi"></use>
        </svg>
        为了保障住宿安全，建议您购买。
    </p>

    <div class="container-btn">
        <button class="finish" @click="finish">完成</button>
    </div>
</main>

@import "js.html"
<script src="../script/zhu_su_yi_wai_xian.js"></script>
</body>
@import "footer.html"